<template>
    <div>
        <div class="nav">
            <router-link to="/discover/tuijian">推荐</router-link>
            <router-link to="/discover/toplist">排行榜</router-link>
            <router-link to="/discover/gedan">歌单</router-link>
        </div>
        <!-- 给二级路由加路由出口 -->
        <router-view />
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    img {
        width: 100%;
    }

    .nav {
        display: flex;
        height: 30px;
        background: #f00;
    }

    .nav a{
        flex: 1;
        text-decoration: none;
        color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav a.router-link-active{
        color: #0f0;
    }
</style>